<template>
  <div class="message-board">
    <div class="message-board-top">
      <div class="subject">{{ info.subject }}</div>
      <div class="sub-title">
        <span>{{ info.date }}</span
        ><span>{{ info.viewCnt }}阅读量</span>
      </div>
      <pre class="main-content" v-html="info.content "></pre>
    </div>
    <div class="message-board-bottom">
      <div class="message-header">
        <div class="message-header-left">追忆思念</div>
        <router-link
          tag="div"
          :to="{ name: 'MessageSend', query: {id: this.id} }"
          class="message-header-right"
          >留言献花</router-link
        >
      </div>
      <ol class="message-wrapper">
        <li class="message" v-for="(msg, i) of messages" :key="i">
          <div class="top">
            <div class="avatar"><img :src="msg.avatar" /></div>
            <div class="name">{{ msg.name }}</div>
            <div class="date">{{ msg.date }}</div>
          </div>
          <pre class="bottom" v-html="msg.content"></pre>
        </li>
      </ol>
    </div>
  </div>
</template>

<script>
import {jbxx1querydata4object, lybquerydata4objectById} from '../assets/js/api';
const EMOJI = {
  '鲜花': 'flower',
  '蜡烛': 'candle',
  '绶带': 'scarves',
  '白鸽': 'pigeon'
};
// let messages = [{
//   avatar: './static/images/avatar.png',
//   name: '黄亮',
//   date: '2019-06-03',
//   content: '马老安息，\n一路走好！\n[鲜花]'
// }, {
//   avatar: './static/images/avatar.png',
//   name: '陈明',
//   date: '2019-06-04',
//   content: '马老安息，\n一路走好！\n[鲜花][蜡烛][绶带][白鸽]'
// }];
export default {
  methods: {
    emojiTranslate(v) {
      return v && v.replace(/<[^>]*>|<\/[^>]*>/gm, '')
        .replace(/\[([^\]]+)\]/g, (match, str) => {
          let emoji = EMOJI[str];
          if (emoji) {
            return `<img src="./static/images/emoji/${emoji}.png"/>`;
          }
          return match;
        });
    }
  },
  data() {
    return {
      id: this.$route.query.id,
      info: {
        subject: '',
        content: '',
        date: '',
        viewCnt: 0
      },
      messages: []
    };
  },
  mounted() {
    jbxx1querydata4object(this.id).then(({data}) => {
      const obj = data[0];
      this.info.subject = obj.title;
      this.info.content = obj.nr;
      this.info.date = obj.createTime;
      this.info.viewCnt = obj.ydl;
    });
    lybquerydata4objectById({
      jbxxId: this.id
    }).then(({data}) => {
      this.messages = data.map(o => ({
        ...o,
        avatar: './static/images/avatar.png',
        name: o.lyry,
        date: o.lysj,
        content: this.emojiTranslate(o.lynr)
      }));
    });
  }
};
</script>

<style lang="less" scoped>
.message-board {
  background: #fff;
  min-height: 100%;
  .message-board-top {
    padding: 35px 30px 0;
    .subject {
      font-size: 40px;
      font-weight: bold;
      font-stretch: normal;
      line-height: 50px;
      letter-spacing: 0px;
      color: #353535;
    }
    .sub-title {
      margin-top: 22px;
      font-size: 26px;
      font-weight: normal;
      font-stretch: normal;
      color: #888888;
      > span:last-child {
        margin-left: 20px;
      }
    }
    .main-content {
      margin: 40px 0 80px 0;
      font-size: 32px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 52px;
      letter-spacing: 0px;
      color: #4c4c4c;
      line-height: 1.8;
    }
  }
  .message-board-bottom {
    .message-header {
      display: flex;
      border-width: 1px 0;
      border-color: #eee;
      border-style: solid;
      height: 84px;
      align-items: center;
      justify-content: space-between;
      .message-header-left {
        position: relative;
        font-size: 30px;
        font-weight: bold;
        font-stretch: normal;
        color: #343434;
        padding-left: 48px;
        &::after {
          content: "";
          position: absolute;
          width: 4px;
          height: 22px;
          background: #3198ed;
          top: 10px;
          left: 30px;
        }
      }
      .message-header-right {
        font-size: 30px;
        padding-right: 30px;
        font-weight: bold;
        font-stretch: normal;
        color: #980000;
      }
    }
    .message-wrapper {
      .message {
        padding: 35px 30px 0;
        border-bottom: 1px solid #eee;
        .top {
          display: flex;
          height: 80px;
          align-items: center;
          .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            > img {
              width: 100%;
              height: 100%;
            }
          }
          .name {
            flex: 1;
            padding-left: 20px;
            font-size: 34px;
            font-weight: bold;
            letter-spacing: 0px;
            color: #343434;
          }
          .date {
            font-size: 28px;
            line-height: 46px;
            color: #888888;
          }
        }
        .bottom {
          padding-left: 100px;
          font-size: 34px;
          font-weight: bold;
          font-stretch: normal;
          line-height: 1.5;
          letter-spacing: 0px;
          color: #343434;
          /deep/ img {
            height: 50px;
            width: 50px;
          }
        }
      }
    }
  }
}
</style>
